<template>
  <yt-page title="初步研判" scroll>
    <yt-tabs v-model="page" :slider="false">
      <yt-tab-panel :text="TABS.info">
        <yt-form>
          <detail :id="id"></detail>
        </yt-form>
      </yt-tab-panel>
      <yt-tab-panel :text="TABS.cases">
        <yt-group :group="false" ref="group" :name="TABS.cases" :searchApi="searchApi">
          <yt-card class="no-padding" :tag="false" slot-scope="item" :title="item.programme_name" btn="查看详情" @btn-click="onClickCase(item)">
            <yt-cell label="事故地点" border="none" :value="item.accident_place"></yt-cell>
            <yt-cell label="事故时间" border="none" :value="item.createdAt | formatTime"></yt-cell>
            <yt-cell label="报告人姓名" border="none" :value="item.name"></yt-cell>
            <yt-cell label="报告人电话" border="none">
              <yt-cell-call :tel="item.telephone || ''"></yt-cell-call>
            </yt-cell>
          </yt-card>
        </yt-group>
      </yt-tab-panel>
      <yt-tab-panel :text="TABS.plans">
        <yt-group :group="false" :name="TABS.plans" :searchApi="searchApi">
          <yt-card class="no-padding" :tag="false" slot-scope="item" :title="item.title">
            <div slot="more">
              <span class="c-green" v-if="item._state === 1">已启用</span>
              <yt-btn v-if="item._state === 0" size="mini" :loading="(loaded) => use(item, loaded)">启用</yt-btn>
            </div>
            <yt-cell label="适用事故类型" labelWidth="120px" border="none" :value="item.apply_type"></yt-cell>
            <yt-cell label="适用范围" border="none" :value="item.apply_range"></yt-cell>
          </yt-card>
        </yt-group>
      </yt-tab-panel>
    </yt-tabs>
  </yt-page>
</template>

<script>
import detail from './components/detail'
import { commonApi } from '@/common/api/commonApi.js'
import { ReplaceDictionary } from '@/common/utils/index.js'
import { formatTime } from '@/common/plugin/index.js'

const TABS = {
  info: '事故信息',
  cases: '相似案例',
  plans: '匹配预案'
}

export default {
  data() {
    return {
      TABS,
      page: 0,
      id: null,
      emergencyObj: {},
      searchApi: async ({ skip, limit }, name) => {
        let param = { skip, limit }
        switch (name) {
          case TABS.cases:
            return this.fetchCases(param)
          case TABS.plans:
            return this.fetchPlans(param)
          default:
            return []
        }
      }
    }
  },
  components: { detail },
  activated() {
    let { id } = this.$route.query
    this.id = id
  },
  methods: {
    async fetchCases(param) {
      let items = await commonApi.search('yj_emergency_information', {
        equalTo: { accident_type: this.$route.query.accident_type },
        notEqualTo: { objectId: this.$route.query.id },
        ...param
      })
      return items
    },
    async fetchPlans(param) {
      let p = [
        commonApi.search('ent_enterprise'),
        commonApi.dictionary('Accident_type'),
        commonApi.searchById('yj_emergency_information', this.$route.query.id), // 当前事故详情
        commonApi.search('yj_special_plan') // 查询所有预案
      ]
      let [entList, accidentTypeDic, emergencyObj, plans] = await Promise.all(p)
      this.emergencyObj = emergencyObj
      // 增加状态字段
      plans.map(v => {
        if (v.id === emergencyObj.reservePlan) {
          v._state = 1
        } else {
          v._state = 0
        }
      })
      return ReplaceDictionary(plans, {
        'enterprise_name:EnterpriseName:id': entList,
        apply_type: accidentTypeDic
      })
    },
    onClickCase(item) {
      this.$router.$push({
        path: '/emergency/info/accidentProfile',
        query: {
          id: item.id
        }
      })
    },
    async use(item, loaded) {
      commonApi
        .save('yj_emergency_information', {
          id: this.id,
          OrganizationTime: formatTime(item.createdAt),
          reservePlan: item.id,
          programme_name: item.title,
          programme_type: item.apply_type
        })
        .then(() => {
          this.$refs.group.startPull()
          this.$Toast('应用成功!', 'success')
        })
        .catch(e => {
          this.$Toast('应用失败!', 'error')
        })
        .then(loaded)
    }
  }
}
</script>

<style scoped lang="stylus">
.no-padding >>> .yt-cell-label
  padding 0

>>> .yt-card-header
  align-items center
</style>
